<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<pre>
      计算属性：

          1. 为什么需要使用计算属性

          模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
          所以，一般我们将在插值表达式中写的复杂逻辑提取到计算属性中
    </pre>
		<div id="app">
			<!-- 在使用指令的时候传递相关参数 -->
			<div>{{ info }}</div>

			<!-- 使用计算属性 -->
			<!-- 注意事项：计算属性是一个属性，使用的时候不需要带括号 -->
			<div>{{ reverse }}</div>

			<div>{{ ageHan }}</div>
		</div>

		<script src="scripts/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					info: 'Tom',
					age: 18,
				},
				methods: {},
				// 计算属性需要写到 computed 节点中
				computed: {
					reverse: function () {
						// 注意：在计算属性内部，必须要有 return
						// 注意：计算属性里面的数据依赖于 data 中的数据，当data中数据发生改变，计算属性返回值也会改变
						return this.info.split('').reverse().join('')
					},
					ageHan: function () {
						return this.age >= 18 ? '我成年了' : '未知'
					},
				},
			})
		</script>
	</body>
</html>
